﻿<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="controlExtends.js"></script>
<script>
$(function(){
	var ceMode = $CE.MODE_BOTH; // 有 $CE.MODE_MOUSE, $CE.MODE_TOUCH, $CE.MODE_BOTH 三種控制模式
	$('div#test').press(ceMode, function(ev){
		$(this).css({'color':'gold', 'font-weight':'bold'});
		return $CE.stopEvent(ev); // 取消後續所有事件處理, 如可此可使不選取文字! // IE NG!
	}, true).up(function(){
		$(this).css({'color':'blue', 'font-weight':'normal'});
	}).click(function(ev){
		alert( //event properties
			'ev.eventPhase='+ev.eventPhase
			+'\nev.bubbles='+ev.bubbles
			+'\nev.cancelable='+ev.cancelable
			+'\nev.currentTarget='+ev.currentTarget
			+'\nev.eventPhase='+ev.eventPhase
			+'\nev.target='+ev.target
			+'\nev.timeStamp='+ev.timeStamp
			+'\nev.type='+ev.type
		);
	});
	
	$('div#container').up(function(){
		$('div#test').css({'color':'blue', 'font-weight':'normal'});
	}, ceMode);
});
</script>

<div id="container" style="background:lightpink; width:800px; height:600px;font-size:20px;">
	<div id="test" style="display:block; cursor:pointer; background:#acf;font-size:35px;color:blue;width:200px;">Test Here!</div>
	* 請依序測試:<br/>
	1. 滑鼠或觸控點擊藍色區域不放, 然後移到粉紅色區域內放開<br/>
	2. 滑鼠或觸控點擊藍色區域不放, 然後移到藍色區域內放開<br/>
	3. 滑鼠或觸控點擊藍色區域不放, 然後移到粉紅色區域外放開<br/>
	4. 點一下(按和放)粉紅色區域<br/>
	5. 點一下(按和放)藍色區域<br/>
	6. 用PC chrome/firefox/IE6/7/8/9測測看<br/>
	7. 用Mobile device 原生 browser(Android, iPhone, iPad)及WebView測測看<br/>
	<br/><br/>
	* 結果:<br/>
	div可work, 但文字會反白 => 須加return false解決(IE8- & Quirk仍NG).<br/><br/>
	anchor在此區up/mouseup不能正常work! 故只能以div為之!!<br/><br/><br/>
	* 其他API都沒有詳細寫上, 等我有空會繼續補.. 目前提供:<br/>
	.down() : 掛 mouseup/touchstart event<br/>
	.move() : 掛 mousemove/touchmove event<br/>
	.up() : 掛 mouseup/touchend event<br/>
	.act() : 同時掛down/move/up相關event<br/>
	.press() : 目前的用法是過渡, 以後將會轉成以 .btnClick() 為主, 處理掉大多的事情!<br/>
</div>